<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>项目宝</title>
<meta name="viewport"
	content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link rel="stylesheet" href="<s:url value='css/mui.min.css'/>">
<link rel="stylesheet" type="text/css"
	href="<s:url value='css/custom.css' />" />
<style>
html, body {
	background-color: #efeff4;
}

p {
	text-indent: 22px;
}

span.mui-icon {
	font-size: 14px;
	color: #007aff;
	margin-left: -15px;
	padding-right: 10px;
}

.mui-off-canvas-left {
	color: #fff;
}

.title {
	margin: 35px 15px 10px;
}

.title+.content {
	margin: 10px 15px 35px;
	color: #bbb;
	text-indent: 1em;
	font-size: 14px;
	line-height: 24px;
}

input {
	color: #000;
}
</style>
</head>

<body>
	<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
		<!--侧滑菜单部分-->
		<aside id="offCanvasSide" class="mui-off-canvas-left">
		<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="title">导航</div>
				<ul
					class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
					<li class="mui-table-view-cell"><a class="mui-navigate-right"
						id="createPj">创建项目</a></li>
					<li class="mui-table-view-cell"><s:if test="pageTool==1">
							<a class="mui-navigate-right mui-active" id="showPj">项目一览</a>
						</s:if> <s:else>
							<a class="mui-navigate-right" id="showPj">项目一览</a>
						</s:else></li>
					<li class="mui-table-view-cell"><s:if test="pageTool==2">
							<a class="mui-navigate-right mui-active" id="showMyPj">我的项目</a>
						</s:if> <s:else>
							<a class="mui-navigate-right" id="showMyPj">我的项目</a>
						</s:else></li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right"
						id="showMyTeack">我的进度</a></li>
					<li class="mui-table-view-cell"><a class="mui-navigate-right"
						id="myinfo">个人中心</a></li>
				</ul>
			</div>
		</div>
		</aside>
		<!--主界面部分-->
		<div class="mui-inner-wrap">
			<header class="mui-bar mui-bar-nav"> <a
				href="#offCanvasSide"
				class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a> <a
				class="mui-btn-link mui-pull-right" id="createPj">创建</a>
                <s:if test="pageTool==1"><h1 class="mui-title">项目一览</h1></s:if> <s:if test="pageTool==2"><h1 class="mui-title">我的项目</h1></s:if>
			</header>
			<div id="offCanvasContentScroll"
				class="mui-content mui-scroll-wrapper">
				<div id="pullrefresh" class="mui-content">
					<!--主界面部分-->
					<!-- <div class="mui-inner-wrap"> -->
					<div id="tabbar-with-contact">
						<ul id="OA_task_2" class="mui-table-view ">
							<s:iterator value="proList" status="all">
								<li class="mui-table-view-cell">
									<div class="mui-slider-right mui-disabled">
										<a class="mui-btn mui-btn-yellow mui-icon mui-icon-compose"
											href="javascript:void(0)" id="edit" name="edit"
											target="<s:property value='#this.pjId'/>"></a> <a
											class="mui-btn mui-btn-red mui-icon mui-icon-trash"
											href="javascript:void(0)" id="delete" name="delete"
											target="<s:property value='#this.pjId'/>"></a>
									</div>
									<div class="mui-slider-handle">
										<div class="mui-table-cell">
											<div class="oa-contact-avatar mui-table-cell">
												<span class="mui-badge mui-badge-success"><s:property
														value="#all.getIndex()+1" /></span>

												<s:if test="#this.pjLevel==1">
													<span class="mui-badge mui-badge-danger">高</span>
												</s:if>
												<s:elseif test="#this.pjLevel==2">
													<span class="mui-badge mui-badge-primary">中</span>
												</s:elseif>
												<s:elseif test="#this.pjLevel==3">
													<span class="mui-badge mui-badge-warning">低</span>
												</s:elseif>

												<s:if test="#this.pjCompleteStatus==6">
													<span class="mui-badge mui-badge-success">OVER</span>
												</s:if>
												<s:elseif test="#this.pjCompleteStatus==-1">
													<span class="mui-badge">DEL</span>
												</s:elseif>
												<s:else>
													<span class="mui-badge mui-badge-primary">ING</span>
												</s:else>

											</div>
											<div class="oa-contact-content mui-table-cell">
												<div class="mui-clearfix">
													<h4 class="oa-contact-name">${pjName}</h4>
													<%--                                        <span class="oa-contact-position mui-h6">开发人员</span> --%>
												</div>
												<p class="oa-contact-email mui-h6">${pjComment}</p>
											</div>
										</div>
									</div>
								</li>
							</s:iterator>
						</ul>
					</div>
				</div>
			</div>
			<!-- off-canvas backdrop -->
			<div class="mui-off-canvas-backdrop"></div>
		</div>
	</div>
	<script src="<s:url value='js/mui.min.js'/>"></script>
	<script>
		mui.init();
		//侧滑容器父节点
		var offCanvasWrapper = mui('#offCanvasWrapper');
		//主界面容器
		var offCanvasInner = offCanvasWrapper[0]
				.querySelector('.mui-inner-wrap');
		//菜单容器
		var offCanvasSide = document.getElementById("offCanvasSide");

		//移动效果是否为整体移动
		var moveTogether = false;
		//侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
		var classList = offCanvasWrapper[0].classList;
		classList.add('mui-slide-in');
		//主界面和侧滑菜单界面均支持区域滚动；
		mui('#offCanvasSideScroll').scroll();
		mui('#offCanvasContentScroll').scroll();

		mui('.mui-content').on('tap', '#edit', function() {
			mui.openWindow({
				url : "getProjectInfoById.action?pjId=" + this.target
			});
		});
		mui('.mui-content').on('tap', '#delete', function() {
			mui.openWindow({
				url : "del.action?pjId=" + this.target
			});
		});

		mui('body').on('tap', '#createPj', function() {
			mui.openWindow({
				url : "createPj.action"
			});
		});
	</script>

	<script src="<s:url value='js/common.js'/>"></script>
</body>
</html>